<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码页面</title>
</head>
<body>
<!--这是一段注释。extends继承basepage.html页面-->
{% extends "Photography/basepage.html" %}

{% block content %}
    <div style="margin: 5% 40%;">
        <h1>修改密码</h1>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#button').click(function () {
                    var name = $("#id_username").val();
                    var psw = $("#id_psw").val();
                    var new_pwd = $("#id_new").val();
                    if (name && psw) {
                        $.post("/api/v1/users/reset_psd/",
                            {
                                "username": name,
                                "password": psw,
                                "new_pwd": new_pwd,
                            },
                            function (result) {
                                if (result.code == "100") {
                                    window.location.href = "/";   //页面成功跳转
                                } else {
                                    $("#msg").text(result.msg)          //页面失败显示提示语
                                }

                            });
                    } else {
                        $("#msg").text(msg)
                    }

                });
            })
        </script>

        <form>
            {% csrf_token %}
            <p>
                用户名：<input type="text" id="id_username" name="username" , required="required">*
            </p>
            <p>
                密码：<input type="password" id="id_psw" name="password" , required="required">*
            </p>
            <p>
                新密码：<input type="password" id="id_new" name="new_pwd" , required="required">*
            </p>
        </form>

        <p>
            <input type="submit" id="button" value="提交">
        </p>
        <p style="color:red" id="msg">
            {{ msg }}</p>


    </div>
{% endblock content %}
</body>
</html>